<template>
  <div class="company-list-1">
    <div class="content">
      <div class="content-header">今日巡查路线建议</div>
      <div id="mapContainer" style="width: 100%; height: 95%"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

window._AMapSecurityConfig = {
  securityJsCode: 'ebb52d5289df550e0e7067e3f5de83d7'
}

const logisticsInfoList = ref([
  { latitude: '22.916403', longitude: '112.046369' },
  { latitude: '22.916917', longitude: '112.040683' }
])

const props = defineProps({
  info: {
    type: Object,
    default: () => {}
  }
})

watch(
  () => props.info,
  (newValue) => {
    console.log('newValue', newValue)
    if (newValue.length) {
      let locaionInfo = []
      locaionInfo = newValue.map((item) => {
        return {
          latitude: item.latitude,
          longitude: item.longitude
        }
      })
      logisticsInfoList.value = locaionInfo
      nextTick(() => {
        initMap()
      })
    }
  },
  { deep: true, immediate: true }
)
const initMap = () => {
  AMapLoader.load({
    key: 'ab7c4c71dfdd6031a169ff7a4e4138f7', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      // 初始化地图
      const map = new AMap.Map('mapContainer', {
        // 地图风格
        mapStyle: 'amap://styles/whitesmoke',
        // 缩放比例
        zoom: 12
      })

      // 加载插件 - AMap.Drivin
      AMap.plugin('AMap.Driving', function () {
        // 插件加载完成后，初始化 Driving 实例
        const driving = new AMap.Driving({
          // 使用上面得到的地图实例，表示，路径是画在我们当前初始化的这个地图上的
          map,
          showTraffic: false // 关闭实时路况信息
        })

        // 得到 Driving 实例之后，就可以使用 driving.search() 方法，通过起点和终点绘制路径
        // 此处最好不要使用 logisticsInfoList 响应式数据进行地图绘制；
        // 重新声明一个变量，复制一份经纬度数据
        // 有可能我们的经纬度数据是没有的，所以在这块需要进行判断，并且必须 logisticsInfoList.value.length >= 2（必须要有起点 和 终点坐标）
        if (logisticsInfoList?.value && logisticsInfoList.value.length >= 2) {
          const list = [...logisticsInfoList.value]
          // 取出 起点、终点、途径点
          const start = list.shift()
          const end = list.pop()
          const waypoints = list // 途经点
          // 剩下的list就是途径点
          // 该函数接收第四个参数
          // 第一个参数：由起点经纬度组成的数组
          // 第二个参数：由终点经纬度组成的数组
          // 第三个参数：配置对象 - 请移步 3.3
          // 第四个参数：函数 - 执行了该函数，就表示路径已经规划完成
          driving.search(
            [start?.longitude, start?.latitude],
            [end?.longitude, end?.latitude],
            {
              waypoints: waypoints.map((point) => [point.longitude, point.latitude]) // 传入途径点
            },
            () => {
              // 规划完毕
            }
          )
        }
      })
    })
    .catch((e) => {
      console.log(e)
    })
}

onMounted(() => {
  // initMap()
})
</script>

<style scoped lang="scss">
@import '@/assets/table.css';

.company-list-1 {
  padding: 0 0 10px;
  width: 100%;
  height: 800px;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 16px;

  .content {
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 10px;
    background-color: rgba(0, 0, 0, 0.2);

    &-header {
      width: 100%;
      height: 50px;
      background: url('@/assets/task/u1289.png') no-repeat center top;
      display: flex;
      justify-content: center;
      line-height: 50px;
    }
  }
}
</style>
